<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>canvas图形</title>
    </head>
    <body>
        <canvas id="canvas" width="400" height="300" >您的浏览器不支持canvas，建议用360极速模式看</canvas>
        <script>
            function draw(){
                var canvas = document.getElementById("canvas"),
                    ctx = canvas.getContext("2d");
                    ctx.fillStyle = "#eeeeff";
                    ctx.fillRect(0,0,400,300);
                    var n = 0;
                    var dx = 150;
                    var dy = 150;
                    var s = 100;
                    ctx.beginPath();
                    ctx.fillStyle = "cornflowerblue";
                    ctx.strokeStyle = "#eee";
                    var x = Math.sin(0);
                    var y = Math.cos(0);
                    var dig = 11 * Math.PI / 15;
                    for(var i=0; i<30; i++){
                        var x = Math.sin(i * dig);
                        var y = Math.cos(i * dig);
                        ctx.lineTo(dx+x*s,dy+y*s);
                    }
                    ctx.closePath();
                    ctx.fill();
                    ctx.stroke();
            }
            draw();

        </script>
    </body>
</html>
